<template>
  <div>
         <!-- 顶部滑动条-->
           <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="1-5" name="first">
                <!-- 中间区域 -->
              <ul>
                <router-link v-for="(item, i) in list.slice(0,5)" :key="item.id"
                :to="'/HomeContainer/PhotoInfo/'+item.id" tag="li">
                  <img v-lazy="item.img_url" >
                    <div class="info">
                      <h1 class="info-title">{{item.title}}</h1>
                        <div class="info-body">{{item.zhaoyao}}</div>

                    </div>
                </router-link>
              </ul>
              </el-tab-pane>
              <el-tab-pane label="6-10" name="second">
                <ul>
                <router-link v-for="(item, i) in list.slice(5,10)" :key="item.id"
                :to="'/HomeContainer/PhotoInfo/'+item.id" tag="li" >
                  <img v-lazy="item.img_url">
                    <div class="info">
                      <h1 class="info-title">{{item.title}}</h1>
                        <div class="info-body">{{item.zhaoyao}}</div>
                    </div>
                </router-link>
              </ul>
              </el-tab-pane>
              <el-tab-pane label="11-15" name="third"><ul>
                <router-link v-for="(item, i) in list.slice(10,15)" :key="item.id"
                :to="'/HomeContainer/PhotoInfo/'+item.id" tag="li" >
                  <img v-lazy="item.img_url">
                    <div class="info">
                      <h1 class="info-title">{{item.title}}</h1>
                        <div class="info-body">{{item.zhaoyao}}</div>
                    </div>
                </router-link>
              </ul>
              </el-tab-pane>
              <el-tab-pane label="16-20" name="fourth">
                <ul>
                  <router-link v-for="(item, i) in list.slice(15,20)" :key="item.id"
                :to="'/HomeContainer/PhotoInfo/'+item.id" tag="li">
                    <img v-lazy="item.img_url">
                      <div class="info">
                        <h1 class="info-title">{{item.title}}</h1>
                          <div class="info-body">{{item.zhaoyao}}</div>
                      </div>
                  </router-link>
                </ul>
                </el-tab-pane>
                <el-tab-pane label="21-25" name="five">
                  <ul>
                    <router-link v-for="(item, i) in list.slice(21,25)" :key="item.id"
                :to="'/HomeContainer/PhotoInfo/'+item.id" tag="li">
                      <img v-lazy="item.img_url">
                        <div class="info">
                          <h1 class="info-title">{{item.title}}</h1>
                            <div class="info-body">{{item.zhaoyao}}</div>
                        </div>
                    </router-link>
                  </ul>
                  </el-tab-pane>
            </el-tabs>
  </div>
</template>

<script>
export default {
    data() {
      return {
         activeName: 'first',
        //存储图片的数据
        list:[
          {
            id:1,
            title:"一年前更新至160话",
            img_url:"https://manhua.qpic.cn/vertical/0/27_17_47_9d9dcb786769eacf2757350810b746b0_1545904076067.jpg/420",
            zhaoyao:"故事讲述男主角八真重护因拒绝继承家业而遭父亲逐出家门，并被流放至学生特区“七重岛”上。仅有极少生活费的重护找到一间月租仅为五千日元的公寓，却没想到入住的房间内竟然有一位地缚灵龙娘七七七，而她与岛上的秘宝“七七七藏品”有着紧密的联系……"
          },
          {
            id:2,
            title:"一年前更新至90话",
            img_url:"https://manhua.qpic.cn/vertical/0/27_17_40_eddce70cc4294347d67aa8144dd7772b_1545903644311.jpg/420",
            zhaoyao:"本篇为葵关南所著“碧阳学园学生会默示录”系列的第一集。私立碧阳学园学生会，以会长为首的美少女成员四人组集中的乐园，但是存在一个唯一的异性——副会长的杉崎键，而他有着不为人知的一面。作为“议事录”系列的外传，故事不再局限于学生会！在本篇里着墨不多、学生会成员之外的角色们也活跃于各个短"
          },
          {
            id:3,
            title:"一年前更新至579话",
            img_url:"https://manhua.qpic.cn/vertical/0/30_15_55_95a99bb166053c6e56a518989c38cdd4_1543564557005.jpg/420",
            zhaoyao:"故事讲述在将“超能力开发”作为学校课程的学园都市里，人们每天都在超能力开发上进行相互竞争。根据能力高低不同，可以分为6级，从无能力（level 0）到超能力（level 5）。主角上条当麻是一个无能力者，但并非完全没有能力，他的能力是能够将一切异能之力无效化…… "
          },
          {
            id:4,
            title:"一年前更新至348话",
            img_url:"https://manhua.qpic.cn/vertical/0/29_10_42_58713e747976a609858062a6c8954e01_1543459340128.jpg/420",
            zhaoyao:"1711年，背井离乡的炼金术师们得到了永生之酒，成为了“不死者”，“不死者”之间相互“吞食”的悲剧也开始上演。到了1930年，在禁酒令时代的纽约，地下组织卡莫拉正忙于准备数日后的重要仪式，强盗情侣刚刚抵达纽约中央车站，黑手党的甘德鲁三兄弟正遇到麻烦…… "
          },
          {
            id:5,
            title:"一年前更新至26话",
            img_url:"https://manhua.qpic.cn/vertical/0/14_11_38_dfdc4e133add433daab7828bacdc0b81_1542166731805.jpg/420",
            zhaoyao:"【每周一三五更新】神秘U市的一间废弃小屋内，突然钻出了巨大的怪物，疯狂的破坏了整座U市。为了制止怪物继续肆虐，人类迫于无奈使用了核弹攻击，虽然消灭了怪物，但是也制造出了一个无人区。然而小屋不仅完好无损，还接连不断钻出新的怪物……？"
          },
          {
            id:6,
            title:"一年前更新至81话",
            img_url:"https://manhua.qpic.cn/vertical/0/21_12_33_7d62eef219da40e705a663b89b6bfd91_1498019627939.jpg/420",
            zhaoyao:"接下来将要述说的，是某个王国王女的故事。这是以憧憬魔法的王女恢复了前世的记忆为起始的故事。时而顽皮闹事，时而惹人心往，不断追求着魔法的魅力和真理。接下来，就是物语的开始。"
          },
          {
            id:7,
            title:"一年前更新至37话",
            img_url:"https://manhua.qpic.cn/vertical/0/18_10_16_553111816c4fcd6e5238c31fec8a49d4_1584497810189.jpg/420",
            zhaoyao:"【周六更新】改编自纵横中文网小说，原著：梁不凡。一代兵王，因叛徒出卖，导致红颜知己陨落；怒发冲冠，回归都市，掀起腥风血雨。英雄救美？还是扮猪吃虎？女蛇精病？小萝莉？怀搂美人腰，铸就王途霸业！商务合作联系qq:762082052"
          },
          {
            id:8,
            title:"一年前更新至22话",
            img_url:"https://manhua.qpic.cn/vertical/0/23_19_49_6116f957bd59eca3b58f28bc44a8ae02_1587642596033.jpg/420",
            zhaoyao:"“像我这样的人，有什么资格……” “你没有错，你是最好的人，是你的眼睛赋予了别人光芒。“ 一个看到光就能说明喜欢，建立光之契约的世界 一个没有建立契约，就会死的世界？女蛇精病？小萝莉？怀搂美人腰，铸就王途霸业！商务合作联系qq:762082052"
          },
          {
            id:9,
            title:"一年前更新至112话",
            img_url:"https://manhua.qpic.cn/vertical/0/14_10_18_3b2734742e0e74e3b31f52e21a6c20bd_1560478726545.jpg/420",
            zhaoyao:"许朝暮六岁那年，父亲战死沙场，之后被战王黎湛收养，因生具天女命格，被封为护国公主。黎湛对许朝暮管教严格，动辄打骂，许朝暮多年来处心积虑逃离魔掌，终于在十六岁那年被封为太子妃，然而太子的人选还是未知之数。"
          },
          {
            id:10,
            title:"一年前更新至358话",
            img_url:"https://manhua.qpic.cn/vertical/0/14_15_42_b9a3545ce39409b0748087252e5e03f2_1573717330985.JPG/420",
            zhaoyao:"长孙无垢自小就倾慕年少英伟的李世民，为了实现他心中的盛世伟业，她想方设法嫁给他，成为他的正妻。陪伴他渡过艰难的失势时光、陪他荣登大宝、帮助他打理后宫照顾子嗣……可是偏有那些不长眼的女人，想要她的“皇后”之位。那可不行，这种女人，来一个灭一个，来两个灭一双！"
          },
          {
            id:11,
            title:"一年前更新至456话",
            img_url:"https://manhua.qpic.cn/vertical/0/25_20_51_cb6f18f83d234f5d5dc7f4a6a7a4895a_1582635103439.jpg/420",
            zhaoyao:"唐悦以为自己是被养父用三千万卖给基佬霍晟轩做同妻，本来轻松自在，但在霍晟轩的安排下，让她与其同父异母的大哥，特种兵出身的霍晟之结了婚。霍晟之原本难忘已死的前妻，坚决拒绝这门婚事，但随着时间和两人接触，霍晟之发现自己越来越离不开唐悦这个小妖精…… "
          },{
            id:12,
            title:"一年前更新至10话",
            img_url:"https://manhua.qpic.cn/vertical/0/09_11_39_ebfa027c55bdb48479f645dd4109868c_1554781174625.jpg/420",
            zhaoyao:"为了调查当年父亲死亡的真相，顾菁菁踏进刑侦这一条道路，可是随着时间的推移，一个一个疯狂的案子接踵而出，当红花旦被残忍焚尸？正值青春年华的高三学生吴华惨死在街头，为何他的母亲要选择撤案……"
          },
          {
            id:13,
            title:"一年前更新至456话",
            img_url:"https://manhua.qpic.cn/vertical/0/29_11_11_098fbf7a4e9746ce9a717b5c137e2e1a_1553829073272.jpg/420",
            zhaoyao:"顾凝试图阻止一场她已预知的凶杀案，而慌忙中报案的她，却因为报案时间早于案发时间而被警方怀疑，刑警队长湛明也因此开始关注这个奇女子，虽然湛明并不相信她所谓的预知死亡，但顾凝却一再让他吃惊，顾凝通过凝视死者的眼睛，就说出了许多只有法医才知道的细节，但还有一件他没有察觉的事，就是他已经爱上了顾凝。"
          },
          {
            id:14,
            title:"一年前更新至33话",
            img_url:"https://manhua.qpic.cn/vertical/0/14_19_43_9164de89c3171613ec405e75a162c800_1560512613597.jpg/420",
            zhaoyao:"2060年，陨石撞击北极极冠。 地球成为了巨型未知生命“异生兽”的乐园。 陨石中发现的万用能源“彼岸结晶”给予人类了最后的希望。 随着第一座浮空城市“尤克特拉希尔”的建立，人类正式启用新纪元NC0001年。 NC0020年，神秘女孩出现… 她将会带领人类再次统御全球还是毁灭？"
          },
          {
            id:15,
            title:"一年前更新至45话",
            img_url:"https://manhua.qpic.cn/vertical/0/20_15_55_ee2cd271b3930995b7eb7780e5116db6_1550649310389.jpg/420",
            zhaoyao:"【他是刑侦队大队长，面容冷峻不苟言笑，刑侦能力在大队中首屈一指。 她是海归表情专家，活泼可爱独立任性，表情分析能力炉火纯青，被称为大神。 首次合作，就遇到了棘手的大案件，抢劫，走私，狡猾的主谋嫌犯狡兔三窟，而他和她则技更胜一筹，一步步抽丝剥茧，最终拨开迷雾，将主谋罪犯绳之以法。"
          },
          {
            id:16,
            title:"一年前更新至99话",
            img_url:"https://manhua.qpic.cn/vertical/0/03_15_18_3363a19629ff709790a1f9db97b8a3ab_1562138310575.jpg/420",
            zhaoyao:"与异族的最后一役，莫峰上校选择了与敌人同归于尽！却在八年前醒来——时空逆转，占领先机的他要如何才能扭转全人类的命运？！"
          },
          {
            id:17,
            title:"一年前更新至236话",
            img_url:"https://manhua.qpic.cn/vertical/0/22_16_32_73581cd84a343cd817af922aadc057b1_1553243573417.jpg/420",
            zhaoyao:"上一世，她是任人利用的棋子，当情报被泄露，她被严刑拷打至死。这一世，她重生成为了东文国的左丞相女儿，她发誓，这次绝对不会再成为任何人的玩物"
          },
          {
            id:18,
            title:"一年前更新至1554话",
            img_url:"https://manhua.qpic.cn/vertical/0/26_14_22_5dc991ddf171125a0bd1db0cff5d9139_1537942932066.jpg/420",
            zhaoyao:"被一只吸血鬼盯上怎么办？！而且还是一只帅到没朋友的男神级吸血鬼！！小龙套演员顾梦即将上演一场被男神扑倒，×了，扑倒男神的好戏…… 每周二/周四/周六/周日更新，精彩内容，敬请期待"
          },
          {
            id:19,
            title:"一年前更新至4226话",
            img_url:"https://manhua.qpic.cn/vertical/0/30_16_14_ed070060c2a78449b48a8db6a6a3c593_1540887266197.jpg/420",
            zhaoyao:"我出生在盗墓世家，盗人坟墓极损阴德，而我们家的报应就出在我身上了。我被一只道行很深的鬼纠缠，他说我是她的冥婚妻子，并要我生生世世爱他……【每周双更】【商务合作微信hangmanwenhua】"
          },
          {
            id:20,
            title:"一年前更新至4555话",
            img_url:"https://manhua.qpic.cn/vertical/0/29_14_35_6599d2388fbe1cf755c0dda9c548c630_1559111710314.jpg/420",
            zhaoyao:"给某国王子戴了绿帽，狂傲特战军医溜回都市，可金鳞岂是池中物，一遇风云化成龙。特战狂医王宇武功能杀天下人，医术可救世间命。左医右武，天下无敌！"
          },
          {
            id:21,
            title:"一年前更新至4525话",
            img_url:"https://manhua.qpic.cn/vertical/0/17_17_20_d967a135004be5d60487bfdee15cf979.jpg/420",
            zhaoyao:"这是一部青春期少男少女单纯又青涩的搞笑校园爱情罗曼史~当性格可爱活泼的沈菲展示了对青梅竹马的专属权，运动神经发达在学校称霸许亦坤感受到了困扰，一直不断示爱的沈菲能成功抱得美男归么？【授权】"
          },
          {
            id:22,
            title:"一年前更新至13话",
            img_url:"https://manhua.qpic.cn/vertical/0/08_13_15_c3ff56919cbfcafe27b2c64218aa03d7_1512710130024.jpg/420",
            zhaoyao:"“倘若这宇宙，真是一片残酷血腥的黑暗森林，我们修真者，也会燃烧自己的生命，绽放出微弱的火花！” 修真40000年代，一个普普通通的边境少年，咆哮星辰，主宰银河的热血传奇！【每周一、四更新】【QQ粉丝①群：315829091 ②群：315481097】"
          },
          {
            id:23,
            title:"一年前更新至98话",
            img_url:"https://manhua.qpic.cn/vertical/0/29_14_35_6599d2388fbe1cf755c0dda9c548c630_1559111710314.jpg/420",
            zhaoyao:"【每周一更新】“帝王本无心，有心的便不是帝王了，可是如果负了你，这天下还有什么意义？”从幼稚懵懂到遍尝爱恨，且看深宫之中，Q萌太子如何成长为一统天下的绝世帝王！"
          },
          {
            id:24,
            title:"一年前更新至70话",
            img_url:"https://manhua.qpic.cn/vertical/0/17_16_53_938f9aa69728fd462a62074b81f0f3fb.jpg/420",
            zhaoyao:"身怀神鬼七杀令的屌丝青年王小二，初涉职场的美女警花李雪，心地善良的痴情小狐狸……漫画每周一三五更新（手机客户端提前1天更新），动画每周二更新，感谢大家一如既往的支持，中国惊奇先生粉丝娱乐群（群号码：93277487）已满，欢迎加入中国惊奇先生粉丝娱乐二群，群号码：273942387"
          },
          {
            id:25,
            title:"一年前更新至66话",
            img_url:"https://manhua.qpic.cn/vertical/0/04_00_29_c869c40b0d5366014746985a372a936c_1549211341501.jpg/420",
            zhaoyao:"【每周一周四中午12点更新】“我是你亲姐姐！这是你欠我的！”“答应爸爸，无论姐姐做错什么，都不要怪她。”当亲生姐姐无数次陷她于不义，当亲情变成道德绑架的枷锁，当她终于失去一切，她，萧可研，终于爆发：“总有一天，我会光明正大地把我的宝贝夺回来！”冰消雪融，寒梅绽放，逆风翻盘，敬请期待"
          },
        ],



      };
},

    methods:{
      handleClick(tab, event) {
           console.log("")
            }
    }
  };

</script>

<style scoped>
ul{
  list-style: none;
  margin: 0;
  padding: 0;
  padding-bottom: 0px 10px;
}
li{
  background-color: #ccc;
  text-align: center;
  margin-bottom:10px ;
  position: relative;
}
img{
  width: 100%;
  vertical-align: middle;
}
.info{
  color: white;
  text-align: left;
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,0.4);
  max-height: 84px;

}
.info-title{
  font-size: 14px;
}
.info-body{
  font-size: 13px;
}

</style>
